<%--
  Created by IntelliJ IDEA.
  User: Shinelon
  Date: 2019/8/18
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>购物车列表</title>
    <link href="layui/css/layui.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        /*自定义页面效果*/
        /*通过页面元素查看类名*/
        .layui-table-cell{
            height:auto;
            line-height:28px;
        }
        i{
            font-style: normal;
        }
        .ft16{
            font-size: 16px;
        }
        .total{
            /*height: 50px;*/
            line-height: 50px;
            border-top: 1px solid #eaeaea;
            border-bottom: 1px solid #eaeaea;
            background: #f2f2f2;
            padding: 0 10px;
        }
        .towbtn{
            text-align: center;
            overflow: hidden;
            padding: 10px 0 20px;
        }
    </style>
    <script src="layui/layui.js" type="text/javascript"></script>
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>

    <script type="text/javascript">
        layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#myTable',//一般都是些id选择器
                url:"cart/selectCart",//数据接口：请求地址
                //page: true,//开启分页

                //where:{"categoryId":101},//发送额外参数
                title:"购物车列表",//导出文件时的名字

                limit: Number.MAX_VALUE,// 数据表格默认全部显示

                //列
                cols: [[ //表头
                    {templet:"<div>{{d.product.id}}</div>", title: '商品编号',align:"center",width:"10%"},
                    {templet:"<div>{{d.product.name}}</div>", title: '商品名称',align:"center",width:"10%"},
                    {templet:"<div>{{d.product.price}}</div>", title: '单价',align:"center",width:"10%"},
                    {templet:"<div>{{d.product.icon}}</div>", title: '商品图片',align:"center",width:"15%"},
                    {templet:"<div>{{d.product.description}}</div>", title: '商品描述',align:"center",width:"20%"},
                    {field:"quantity", title: '购买数量',align:"center",width:"10%"},
                    {templet:"#caoZuo",title:'操作',align:"center",width:"25%"}
                ]]
                //data: data
            });

        });

        function reloadTable() {
            location.reload();
        }

        layui.use(['form','layer','table'],function () {
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;

            form.verify({
                quantity:[
                    /^[1-9]\d*$/,
                    "请输入正确的数量"
                ]
            });

            //当点击提交按钮的时候，会进入到这个函数
            //当所有的验证都通过时，才会进入到这个函数
            //提交修改
            form.on('submit(update)',function (data){
                //console.log(data);

                $.ajax({
                    url:"cart/update",
                    data:data.field,
                    type:"post",
                    success:function (data){
                        //console.log(data);
                        //1.关闭掉修改弹出层
                        layer.closeAll('page');

                        //2.提示修改成功
                        if(data.isUpdate){
                            parent.layer.alert("修改成功！",{icon:1,time:2000});
                        } else {
                            parent.layer.alert("修改失败！",{icon:2,time:2000});
                        }

                        //3.刷新table
                        //table.reload('myTable');
                        reloadTable();

                    }
                })
                return false;//阻止跳转
            })

            //提交下订单
            form.on('submit(register)',function (data){
                //console.log(data);

                $.ajax({
                    url:"order/insert",
                    data:data.field,
                    type:"post",
                    success:function (data){
                        //console.log(data);
                        //1.关闭弹出层
                        layer.closeAll('page');

                        //2.提示成功
                        if(data.isInsert){
                            parent.layer.alert(data.msg,{icon:1,time:2000});
                        } else {
                            parent.layer.alert(data.msg,{icon:2,time:2000});
                        }

                        //刷新购物车
                        reloadTable();
                        //刷新订单管理中的订单信息
                        // var order = parent.document.getElementById("订单列表");
                        // if(order != null){
                        //     console.log(order);
                        //     console.log(order.contentWindow);
                        //     order.contentWindow.reloadTable();
                        // }

                    }
                })
                return false;//阻止跳转
            })

        })

        //打开修改弹出层
        function toOpenUpdateLayer(productId) {
            layui.use(['layer','form'], function(){
                //查询对应患者的原始信息
                //console.log(id);
                var layer = layui.layer;
                var form = layui.form;
                $.ajax({
                    url:"cart/selectOne",
                    data:{"productId":productId},
                    type:"post",
                    success:function (data) {
                        //给表单元素赋值
                        $("#productId").val(data.product.id);
                        $("#productName").val(data.product.name);
                        $("#productPrice").val(data.product.price);
                        $("#productIcon").val(data.product.icon);
                        $("#productDescription").val(data.product.description);
                        $("#quantity").val(data.quantity);

                        //打开弹出层
                        layer.open({
                            title:"修改购买数量",
                            content:$("#updateForm"),
                            type:1,
                            maxmin:true
                        });
                    }
                })

            });
        }

        //打开下订单弹出层
        function toOpenRegisterLayer() {
            layui.use(['layer'], function(){
                var layer = layui.layer;

                //打开弹出层
                layer.open({
                    title:"下订单",
                    content:$("#registerForm"),
                    type:1,
                    maxmin:true
                });

            });
        }

        //确认删除
        function toConfirmDelete(productId) {
            layui.use(['layer','table'],function () {
                var layer = layui.layer;
                var table = layui.table;

                //弹出confirm确认框
                //function为点击确认后执行的函数
                parent.layer.confirm("确认要删除掉这个商品吗？",{icon:3,title:"删除提示"},function () {
                    //console.log(id);

                    //发送删除请求
                    $.ajax({
                        url:"cart/delete",
                        data:{"productId":productId},
                        type:"post",
                        success:function (data) {
                            //1.提示删除成功
                            if(data.isDelete){
                                parent.layer.alert("删除成功！",{icon:1,time:2000});
                            } else {
                                parent.layer.alert("删除失败！",{icon:2,time:2000});
                            }

                            //2.刷新table
                            //table.reload('myTable');
                            reloadTable();
                        }
                    })
                })
            });
        }

    </script>

    <%-- 操作栏 --%>
    <script type="text/html" id="caoZuo">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" onclick="toOpenUpdateLayer('{{d.product.id}}')">
            <i class="layui-icon">&#xe642;</i> 修改
        </button>
        <button type="button" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" onclick="toConfirmDelete('{{d.product.id}}')">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </button>
    </script>
</head>
<body>

    <%-- 表 --%>
    <table id="myTable"></table>
    <div class="total ft16">
        合计：【<span> 消费总金额：<i class="totalMoney">${sessionScope.cart.amount}</i> </span>】
    </div>
    <c:if test="${sessionScope.cart.amount != null}">
        <div class="towbtn">
            <input type="button" class="layui-btn layui-btn-normal" value="结算" onclick="toOpenRegisterLayer()">
        </div>
    </c:if>
    <c:if test="${sessionScope.cart.amount == null}">
        <div class="towbtn">
            <input type="button" class="layui-btn layui-btn-disabled" value="结算">
        </div>
    </c:if>
    <%-- 修改表单 --%>
    <form id="updateForm" class="layui-form" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">商品编号</label>
            <div class="layui-input-block">
                <input id="productId" name="productId" class="layui-input" readonly/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名字</label>
            <div class="layui-input-block">
                <input id="productName" class="layui-input" readonly/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单价</label>
            <div class="layui-input-block">
                <input id="productPrice" class="layui-input" readonly/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品图片</label>
            <div class="layui-input-block">
                <input id="productIcon" class="layui-input" readonly/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品描述</label>
            <div class="layui-input-block">
                <textarea id="productDescription" class="layui-textarea" readonly></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">购买数量</label>
            <div class="layui-input-block">
                <input id="quantity" name="quantity" class="layui-input" placeholder="请输入购买数量" lay-verify="required|quantity"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="update">修改</button>
            </div>
        </div>
    </form>

    <%-- 下订单表单 --%>
    <form id="registerForm" class="layui-form" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input name="buyerName" class="layui-input" lay-verify="required"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input name="iphone" class="layui-input" lay-verify="required"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input name="address" class="layui-input" lay-verify="required"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">微信号</label>
            <div class="layui-input-block">
                <input name="openid" class="layui-input" lay-verify="required"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="register">确定</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll('page')">取消</button>
            </div>
        </div>
    </form>

</body>
</html>
